<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wsh
 * @Date: 2024-03-25 15:51:10
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2024-06-21 15:48:29
-->
<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="社区居家养老服务设施" name="homeBased"></el-tab-pane>
    <el-tab-pane label="养老服务运营单位" v-if="nowRowData.belongProject !=='elderlyMeal'" name="serviceOperation"></el-tab-pane>
    <component :is="currentComponent" :nowRowData="nowRowData" @demand-refreshTab="refreshTab"></component>
  </el-tabs>
  <H4>当前已选择承接单位：</H4>
  <div class="" style="margin-top: 20px">
    <el-tag style="margin: 5px" v-for="tag in tags" :key="tag.id" closable :type="tag.type" @close="handleClose(tag)">
      {{ tag.bindOrgName }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue'
import apiMod from '@/apiMod'
import type { TabsPaneContext } from 'element-plus'
const props = defineProps({
  nowRowData: {
    type: Object,
    default: () => { },
  },
})
// 定义异步组件
const homeBased = defineAsyncComponent(() => import('./homeBased/index.vue'))
const serviceOperation = defineAsyncComponent(() => import('./serviceOperation/index.vue'))
const activeName = ref('homeBased')
const tags = ref([])

// 当前激活的组件
const currentComponent = computed(() => {
  switch (activeName.value) {
    case 'homeBased':
      return homeBased
    case 'serviceOperation':
      return serviceOperation
    default:
      return null
  }
})

const refreshTab = () => {
  // //刷新tab
  apiMod.view_omProjectManagement_page({ id: props.nowRowData.id }).then((res) => {
    if(res.data.records.length ==0) return
    tags.value = res.data.records[0].omProjectCooperatePOList?.filter((obj) => obj.bindType == 1)
  })
}
refreshTab()
const handleClose = (tag) => {
  apiMod.view_omProjectCooperate_del([tag.id]).then((res) => {
    //刷新tab
    apiMod.view_omProjectManagement_page({ id: props.nowRowData.id }).then((res) => {
      if(res.data.records.length ==0) return
      tags.value = res.data.records[0].omProjectCooperatePOList?.filter((obj) => obj.bindType == 1)
    })
    ElMessage({
      message: res.data,
      type: 'success',
    })
  })
}
</script>

<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
